<template>
  <div class="peer-review">
    <div class="header">
      <router-link to="/assignment/1">返回</router-link> > 顺序结构课程 > 作业互评
    </div>
    <div class="content">
      <div class="review-section">
        <div class="review-header">
          <div class="stage">
            <h2>作业批改阶段</h2>
            <p>作业批改</p>
            <p>完成互评</p>
            <p class="status" v-if="reviewCount < 5">正在进行</p>
            <p class="status" v-else>✔</p>
          </div>
        </div>
        <div class="requirements">
          <h3>作业要求：</h3>
          <p>{{ assignment.requirements }}</p>
        </div>
        <div class="homework">
          <h3>第{{ reviewCount + 1 }}份作业：</h3>
          <div class="homework-content">
            <p>{{ currentHomework.content }}</p>
          </div>
          <router-link v-if="currentHomework.attachmentAvailable" class="download-link" to="#" @click="downloadAttachment">下载附件</router-link>
          <router-link v-else class="download-link" to="#" @click="noAttachment">下载附件</router-link>
        </div>
        <div class="peer-review">
          <h3>进行互评：</h3>
          <div class="review-status">
            <p>互评进度：{{ reviewCount }}/5</p>
            <div class="score-section">
              <p>评分：<input type="number" v-model="score" placeholder="99"></p>
              <button @click="scoreReview">评分</button>
            </div>
          </div>
          <textarea v-model="reviewContent" placeholder="请进行互评"></textarea>
          <button @click="submitReview">发送互评</button>
        </div>
      </div>
      <div class="illustration">
        <img src="/images/作业测试1.png" alt="作业测试1" class="side-image"/>
        <div class="progress">
          <p>学习进度</p>
          <p>已完成0课时/共n课时</p>
        </div>
        <div class="course-info">
          <p>所属课程</p>
          <p>{{ assignment.courseName }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '../api';

export default {
  data() {
    return {
      score: '',
      reviewContent: '',
      reviewCount: 0,
      currentHomework: {},
      assignment: {}
    };
  },
  created() {
    this.fetchPeerReviewData();
  },
  methods: {
    fetchPeerReviewData() {
      const id = this.$route.params.id;
      api.getAssignmentDetails(id).then(response => {
        this.assignment = response.data;
        this.currentHomework = this.assignment.homeworks[this.reviewCount];
      }).catch(error => {
        console.error('Failed to fetch peer review data:', error);
      });
    },
    scoreReview() {
      if (this.reviewContent.trim() === '') {
        alert('点评些什么吧，亲再点发送互评');
        return;
      }
    },
    submitReview() {
      if (this.reviewContent.trim() === '') {
        alert('点评些什么吧，亲再点发送互评');
        return;
      }
      const data = {
        assignmentId: this.$route.params.id,
        content: this.reviewContent,
        score: this.score,
        reviewCount: this.reviewCount
      };
      api.submitPeerReview(data).then(() => {
        this.reviewCount++;
        this.reviewContent = '';
        alert('互评已提交');
        this.currentHomework = this.assignment.homeworks[this.reviewCount];
      }).catch(error => {
        console.error('Failed to submit review:', error);
      });
    },
    downloadAttachment() {
      alert('下载附件');
    },
    noAttachment() {
      alert('没有需要下载的附件');
    }
  }
};
</script>

<style scoped>
.peer-review {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.header {
  margin-bottom: 20px;
}
.content {
  display: flex;
  justify-content: space-between;
}
.review-section {
  flex: 3;
  margin-right: 20px;
}
.review-header {
  background: #f0f0f0;
  padding: 10px;
  margin-bottom: 20px;
}
.review-header .stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.review-header h2 {
  margin: 0;
}
.review-header p {
  margin: 5px 0;
}
.review-header .status {
  color: blue;
}
.requirements, .homework, .peer-review {
  background: #f9f9f9;
  padding: 10px;
  margin-bottom: 20px;
}
.homework-content {
  background: #e9e9e9;
  padding: 10px;
}
.download-link {
  display: block;
  text-align: right;
  margin-top: 10px;
  color: #007bff;
  cursor: pointer;
}
.score-section {
  display: flex;
  align-items: center;
  font-size: 16px;
}
.score-section input {
  width: 50px;
  margin: 0 10px;
  font-size: 16px;
}
textarea {
  width: 100%;
  height: 100px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: vertical;
  font-size: 16px;
}
textarea::placeholder {
  color: #ccc;
}
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 16px;
}
button:hover {
  background-color: #0056b3;
}
.illustration {
  flex: 1;
  text-align: center;
}
.illustration img {
  max-width: 100%;
  height: auto;
}
.illustration .progress, .illustration .course-info {
  background: #f0f0f0;
  padding: 10px;
  margin-top: 20px;
}
.review-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.review-status p {
  margin: 0;
}
</style>
